<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<%@ page import="java.util.*"%> 
<%@ page import="java.text.SimpleDateFormat"%>
<% 
   Date date=new Date();
   SimpleDateFormat formater = new SimpleDateFormat("yy-MM-dd  HH:mm:ss");
   String strCurrentTime = formater.format(date); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <title>Insert title here</title> -->
<script src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/js/jquery-1.7.1.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap.js"></script> 
<script src="<%=request.getContextPath() %>/js/jquery.adipoli.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<link href="/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/adipoli.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/demo.css">
<script type="text/javascript">
			$(function(){
				$(".lanrenzhijia .tab a").mouseover(function(){
					$(this).addClass('on').siblings().removeClass('on');
					var index = $(this).index();
					number = index;
					$('.lanrenzhijia .content li').hide();
					$('.lanrenzhijia .content li:eq('+index+')').show();
				});
				
				var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
				if(auto ==1){
					var number = 0;
					var maxNumber = $('.lanrenzhijia .tab a').length;
					function autotab(){
						number++;
						number == maxNumber? number = 0 : number;
						$('.lanrenzhijia .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
						$('.lanrenzhijia .content ul li:eq('+number+')').show().siblings().hide();
					}
					var tabChange = setInterval(autotab,3000);
					//鼠标悬停暂停切换
					$('.lanrenzhijia').mouseover(function(){
						clearInterval(tabChange);
					});
					$('.lanrenzhijia').mouseout(function(){
						tabChange = setInterval(autotab,3000);
					});
				  }
			});

          $(function(){
        	  $('.row1').adipoli({
                  'startEffect' : 'normal',
                  'hoverEffect' : 'popout'
              });
              $('.row3').adipoli({
                  'startEffect' : 'transparent',
                  'hoverEffect' : 'boxRandom'
              });
              $('.row2').adipoli({
                  'startEffect' : 'overlay',
                  'hoverEffect' : 'sliceDown'
              });
              $('.carousel').carousel({
            	  interval: 2500
              });
             
      });      
</script>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px; color:#666; text-align:left;}
h1{ text-align:center;}

.lanrenzhijia{ width:800px; height:250px; margin:100px auto; background:#f0f0f0; font-family:'微软雅黑';}
.lanrenzhijia .tab{ overflow:hidden; background:#ccc;}
.lanrenzhijia .tab a{ display:block; padding:10px 20px; float:left; text-decoration:none; color:#333;}
.lanrenzhijia .tab a:hover{ background:#E64E3F; color:#fff; text-decoration:none;}
.lanrenzhijia .tab a.on{ background:#E64E3F; color:#fff; text-decoration:none;}
.lanrenzhijia .content{ overflow:hidden; padding:10px;}
.lanrenzhijia .content li{ display:none;}
</style>

</head>
<body>
 <div class="row-fluid">
  <div class="span12" style="background-color: #E8E8E8;height:35px;">
    <table class="table">
       <tr>
	       <td>欢迎XX来到便捷订餐平台</td>
	       <td><a href="#">登陆</a></td>
	       <td><a href="#">免费注册</a></td>
	       <td><a href="#">我的订单</a></td>
	       <td><a href="#">购物车</a></td>
	       <td><a href="#">收藏夹</a></td>
	       <td><a href="#">我关注的店铺</a></td>
       </tr>
    </table>
   </div>
 </div>
<div class="row-fluid">
	<div class="span12">
	
	
	<%-- <img src="<%=request.getContextPath()%>/img/indexTop.jpg" /> --%>
	
	<div id="myCarousel" class="carousel slide">
		 <ol class="carousel-indicators">
		   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		   <li data-target="#myCarousel" data-slide-to="1"></li>
		   <li data-target="#myCarousel" data-slide-to="2"></li>
		 </ol>
		 <!-- Carousel items -->
		 <div class="carousel-inner">
		   <div class="active item"><img src="<%=request.getContextPath()%>/img/indexTop.jpg" /></div>
		   <div class="item"><img src="<%=request.getContextPath()%>/img/indexTop2.jpg" /></div>
		   <div class="item"><img src="<%=request.getContextPath()%>/img/indexTop3.jpg" /></div>
		 </div>
		 <!-- Carousel nav -->
		  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
		  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
	</div>


	<div style="height:20px;"></div>
	<div class="row-fluid">
	<div class="span1"></div>
	<div class="span10">
		<div class="row-fluid">
			<div class="span2">
				<div class="row-fluid">
					<img src="<%=request.getContextPath()%>/img/serach.jpg" />
					<form class="form-search" >
					<input type="text" class="input-small search-query">
					<button class="btn btn-mini" type="button">搜索</button>
					</form>
				</div>  
				<div class="row-fluid">
					<img src="<%=request.getContextPath()%>/img/chanpinfenlei.jpg" />
					<table class="table table-hover">
					<tr><td>中餐</td></tr>
					<tr><td>西餐</td></tr>
					<tr><td>甜点</td></tr>
					<tr><td>饮料</td></tr>
					</table>
				</div>
				<div class="row-fluid">
					<div><img src="<%=request.getContextPath()%>/img/zaixian.jpg" /></div><br>
					<div align="left"><p><img src="<%=request.getContextPath()%>/img/QQ.jpg" /><a href="#">在线客服一</a></p></div>
					<div align="left"><p><img src="<%=request.getContextPath()%>/img/QQ.jpg" /><a href="#">在线客服二</a></p> </div>
				</div>
				</div>
				<div class="span10">
					<div class="row-fluid">
						<div class="effect-container">
						<img class="img-style row1" src="<%=request.getContextPath()%>/img/z1.jpg"/>
						<img class="img-style row1" src="<%=request.getContextPath()%>/img/z2.jpg"/>
						<img class="img-style row1" src="<%=request.getContextPath()%>/img/z3.jpg"/>
						<img class="img-style row1" src="<%=request.getContextPath()%>/img/z4.jpg"/>
						</div>
					</div>
						
							<div class="lanrenzhijia">
								<div class="tab">
							    	<a href="javascript:;" class="on">朋友聚会套餐</a>
							        <a href="javascript:;">情侣套餐</a>
							        <a href="javascript:;">午市套餐</a>
							        <a href="javascript:;">商务套餐</a>
							    </div>
							    <div  class="content">
							    	<ul>
							        	<li style="display:block;">
								        	<img class="img-style row1" src="<%=request.getContextPath()%>/img/z1.jpg"/>
											<img class="img-style row1" src="<%=request.getContextPath()%>/img/z2.jpg"/>
											<img class="img-style row1" src="<%=request.getContextPath()%>/img/z3.jpg"/>
											<img class="img-style row1" src="<%=request.getContextPath()%>/img/z4.jpg"/>
							        	</li>
							            <li>
							                <img class="img-style row1" src="<%=request.getContextPath()%>/img/t1.jpg"/>
											<img class="img-style row1" src="<%=request.getContextPath()%>/img/t2.jpg"/>
											<img class="img-style row1" src="<%=request.getContextPath()%>/img/t3.jpg"/>
											<img class="img-style row1" src="<%=request.getContextPath()%>/img/t4.jpg"/></li>
							            <li>待定</li>
							            <li>待定</li>
							        </ul>
							    </div>
		                    </div>
				</div>
		</div>
	</div>
	<div class="span1"></div>
	</div>
	</div>
</div>
<div align="center" style="background-color: #2E2E2E;height:90px;">
  <a>首页 | 关于我们 | 联系我们</a><br>
  <a>©2015 便捷订餐 版权所有</a><br>
  <a>技术支持：做饭的 | 卖饭的 | 送饭的 | 吃饭的</a>
</div>
</body>
</html>